<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" class="swipper" school="atguigu">我是div</div>
    <span>我是span</span>
    <input type="checkbox" name="hobby" value="篮球"> 篮球
    <button>获取表单的值</button>
    <button>设置表单的值</button>
    <script>
        /**
         * 获取节点属性：getAttribute('属性名') 获取属性值
         *  get 获取
         *  Attribute  属性
         * 
         * 
         * 设置属性：setAttribute('属性名', 属性值)
         */
        var oDiv = document.querySelector('div');
        console.log('id: ', oDiv.id);
        console.log('id: ', oDiv.getAttribute('id'));

        console.log('class: ', oDiv.className);
        console.log('class: ', oDiv.getAttribute('class'));

        console.log('school 自定义属性: ', oDiv.school);//undefined
        console.log('school : ', oDiv.getAttribute('school'));

        /**
         * 设置span的属性
         * 
         */
        // 1. 获取span
        var oSpan = document.querySelector('span');
        oSpan.setAttribute('id','box123');
        oSpan.setAttribute('class','c1 c2 c3');
        oSpan.setAttribute('user','yuonly')


        // 能否操作表单属性呢？
        var getBtn = document.querySelectorAll('button')[0];
        var setBtn = document.querySelectorAll('button')[1];
        var oInput = document.querySelector('input');
        getBtn.onclick = function(){

            console.log(oInput.value);
            console.log(oInput.checked);
            console.log(oInput.type);

            // getAttribute 只能获取标签身上有的属性
            console.log(oInput.getAttribute('value'));
            console.log(oInput.getAttribute('checked'));// 因为标签身上没有，所以是undefined
            console.log(oInput.getAttribute('type'));
        }

        setBtn.onclick = function(){
            // 设置可以
            oInput.setAttribute('value','玻璃球');
            oInput.setAttribute('checked', true);
        }

    </script>
</body>
</html>